<template>
    <div class="profile-container">
      <el-card class="profile-card" shadow="hover">
        <div class="profile-header">
          <el-upload
            class="avatar-uploader"
            action=""
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeUpload"
          >
            <img v-if="avatarUrl" :src="avatarUrl" class="avatar" />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
          <div class="user-info">
            <h2>{{ user.name }}</h2>
            <p class="info-item"><strong>手机号:</strong> {{ user.phone }}</p>
            <p class="info-item"><strong>性别:</strong> {{ user.gender }}</p>
            <el-button type="primary" size="large" @click="editProfile">编辑个人资料</el-button>
          </div>
        </div>
        <el-divider></el-divider>
        <el-collapse>
          <el-collapse-item title="会员卡详情" name="1">
            <div class="table-container">
              <el-table :data="memberCards" stripe>
                <el-table-column prop="cardNumber" label="卡号"></el-table-column>
                <el-table-column prop="expiryDate" label="有效期"></el-table-column>
                <el-table-column prop="status" label="状态"></el-table-column>
              </el-table>
            </div>
          </el-collapse-item>
        </el-collapse>
      </el-card>
    </div>
  </template>
  
  <script setup>
  import { ref, onMounted } from 'vue';
  import { ElCard, ElUpload, ElButton, ElTable, ElTableColumn, ElDivider, ElCollapse, ElCollapseItem } from 'element-plus';
  import { getUserInfo } from '@/api/register';
  import { usePhoneStore } from '../../stores/phone'; // 引入 Pinia store
  
  const phoneStore = usePhoneStore(); // 使用 Pinia store 获取手机号
  
  const user = ref({
    name: '',
    phone: '',
    gender: ''
  });
  
  const memberCards = ref([]);
  
  const avatarUrl = ref('');
  
  onMounted(() => {
    const phone = phoneStore.phoneNumber;
    getUserInfo(phone).then((res) => {
      user.value.name = res.data.data[0].name;
      user.value.phone = res.data.data[0].phone;
      user.value.gender = res.data.data[0].sex;
    });
  });
  
  const handleAvatarSuccess = (response, file, fileList) => {
    avatarUrl.value = URL.createObjectURL(file.raw);
  };
  
  const beforeUpload = (file) => {
    const isImage = file.type.startsWith('image/');
    if (!isImage) {
      this.$message.error('只能上传图片文件');
    }
    return isImage;
  };
  
  const editProfile = () => {
    console.log('Edit profile clicked');
  };
  </script>
  
  <style lang="less" scoped>
  .profile-container {
    max-width: 900px;
    margin: 0 auto;
    padding: 20px;
    background-color: #f5f7fa; /* 背景颜色 */
  }
  
  .profile-card {
    padding: 20px;
    border-radius: 12px;
    background: #ffffff; /* 卡片背景色 */
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
  }
  
  .profile-header {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  
  .avatar-uploader {
    margin-bottom: 20px;
    display: flex;
    justify-content: center;
  }
  
  .avatar {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    border: 4px solid #409EFF; /* 蓝色边框 */
    object-fit: cover;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s ease;
  }
  
  .avatar-uploader-icon {
    font-size: 40px;
    color: #409EFF; /* 蓝色图标 */
  }
  
  .avatar:hover {
    transform: scale(1.05);
  }
  
  .user-info {
    text-align: center;
  }
  
  .user-info h2 {
    font-size: 24px;
    margin: 10px 0;
    color: #333;
  }
  
  .user-info .info-item {
    font-size: 16px;
    color: #555;
    margin: 5px 0;
  }
  
  .el-button {
    margin-top: 20px;
    background-color: #409EFF; /* 蓝色按钮 */
    border-color: #409EFF; /* 蓝色按钮边框 */
  }
  
  .el-button:hover {
    background-color: #66b1ff; /* 按钮悬停时颜色 */
    border-color: #66b1ff; /* 按钮悬停边框颜色 */
  }
  
  .el-table {
    margin-top: 20px;
  }
  
  .table-container {
    display: flex;
    justify-content: center;
  }
  
  .el-collapse-item {
    border: 2px solid #409EFF; /* 蓝色下拉框边框 */
    border-radius: 0px;
  }
  
  .el-collapse-item .el-collapse-item__header {
    color: #409EFF; /* 蓝色下拉框标题 */
  }
  
  .el-collapse-item .el-collapse-item__content {
    background-color: #f5f7fa; /* 内容背景颜色 */
  }
  </style>
  